<template>
	<view>
		<!-- 导航栏 -->
		<tab-swiper-head :swiperstly="swiperstly" bottomstly="margin-left: 70upx;" :tabIndex="tabIndex" :tabBars="tabBars" @tapTab="tap"></tab-swiper-head>
		<!-- 好友列表 -->
		<!-- <block v-for="(item,index) in friendlist" :ket="index"> 
		<friend-list :item="item"></friend-list>
		</block> -->
		<!-- 内容 -->
		<view class="uni-tab-bar" :style="{height:TabHeight+'px'}" >
			
		<swiper class="swiper-box" :current="tabIndex" @change='tabChange'  >
			
			<swiper-item  v-for="(items ,index) in newList" :key="index">
			
				<scroll-view scroll-y="true" class="list" @scrolltolower="lodemore(index)">
					<!-- 没有内容显示 -->
					
					<template  v-if="index>items.list.length||index<0">
						
						<nothing></nothing>
					</template>
					<!-- 图文列表 -->
					<template v-else>
					<block v-for="(item ,index1) in items.list" :key="index1">
						
						<friend-list :item="item" :tabIndex="tabIndex"></friend-list>
					</block>
					
					<!-- 上拉刷新 -->
					<view @tap="lodemore(index)">
						<load-more :message="items.message"></load-more>
					</view>
				
				</template>
				
			</scroll-view>
			</swiper-item>
			
		</swiper>
		</view>
	</view>
</template>

<script>
	import tabSwiperHead from '../../components/index/tab-swiper-head.vue'
	import tagSexAge from '../../components/common/tag-sex-age.vue'
	import friendList from '../../components/paper/friend-list.vue'
	import loadMore from '../../components/common/load-more.vue'
	import nothing from '../../components/common/nothing.vue'
	export default {
		
		components:{
			tabSwiperHead,
			tagSexAge,
			friendList,
			loadMore,
			nothing
		},
		data() {
			return {
				TabHeight:500,//高度
				tabIndex:0,//导航栏列表下标
				userage:2,
				swiperstly:'width: 33%;',
				friendlist:[{
					username:'蔡徐坤',
					userage:12,
					usersex:'女',
					userimg:'../../static/demo/demo66.jpg'
				},
				{
					username:'蔡徐坤',
					userage:12,
					usersex:'女',
					userimg:'../../static/demo/demo66.jpg'
				},
				{
					username:'蔡徐坤',
					userage:12,
					usersex:'女',
					userimg:'../../static/demo/demo66.jpg'
				},
				{
					username:'蔡徐坤',
					userage:12,
					usersex:'女',
					userimg:'../../static/demo/demo66.jpg'
				},{
					username:'蔡徐坤',
					userage:12,
					usersex:'女',
					userimg:'../../static/demo/demo66.jpg'
				},
				{
					username:'蔡徐坤',
					userage:12,
					usersex:'女',
					userimg:'../../static/demo/demo66.jpg'
				}],
				tabIndex:0,//导航栏列表下标
				tabBars: [{
				    name: '互关',
				    id: 'guanzhu',
					num:22
				}, {
				    name: '关注',
				    id: 'tuijian',
					num:21
				}, {
				    name: '粉丝',
				    id: 'tiyu',
					num:1
				}],
				newList:[
					{
						message:'上拉加载更多',
						list:[
							{
								username:'蔡徐坤',
								userage:12,
								usersex:'女',
								userimg:'../../static/demo/demo66.jpg'
							},
							{
								username:'蔡徐坤',
								userage:12,
								usersex:'女',
								userimg:'../../static/demo/demo66.jpg'
							},
							{
								username:'蔡徐坤',
								userage:12,
								usersex:'女',
								userimg:'../../static/demo/demo66.jpg'
							},
							{
								username:'蔡徐坤',
								userage:12,
								usersex:'女',
								userimg:'../../static/demo/demo66.jpg'
							}
						]
					},
					{
						message:'上拉加载更多',
						list:[
							{
								username:'蔡徐坤',
								userage:12,
								usersex:'女',
								userimg:'../../static/demo/demo66.jpg'
							},
							{
								username:'蔡徐坤',
								userage:12,
								usersex:'女',
								userimg:'../../static/demo/demo66.jpg'
							},
							{
								username:'蔡徐坤',
								userage:12,
								usersex:'女',
								userimg:'../../static/demo/demo66.jpg'
							},
							{
								username:'蔡徐坤',
								userage:12,
								usersex:'女',
								userimg:'../../static/demo/demo66.jpg'
							}
						]
					},
					{
						message:'上拉加载更多',
						list:[
							{
								username:'蔡徐坤',
								userage:12,
								usersex:'女',
								userimg:'../../static/demo/demo66.jpg'
							},
							{
								username:'蔡徐坤',
								userage:12,
								usersex:'女',
								userimg:'../../static/demo/demo66.jpg'
							},
							{
								username:'蔡徐坤',
								userage:12,
								usersex:'女',
								userimg:'../../static/demo/demo66.jpg'
							},
							{
								username:'蔡徐坤',
								userage:12,
								usersex:'女',
								userimg:'../../static/demo/demo66.jpg'
							}
						]
					},
				]
			}
		},
		
		methods: {
		
			//切换tab
			tap(index){
			this.tabIndex=index	
			
			},
			//滑动tab
			tabChange(event){
				this.tabIndex=event.detail.current
				console.log(this.tabIndex)
			},
			lodemore(index){
				console.log(this.newList[index].message)
			
				if(this.newList[index].message!="上拉加载更多"){
					return
				}
				//创建一个虚拟对象
				this.newList[index].message="加载中"
				setTimeout(()=> {
					let obj=	{
								username:'蔡徐坤',
								userage:12,
								usersex:'女',
								userimg:'../../static/demo/demo66.jpg'
								}
					
					this.newList[index].list.push(obj);
					this.newList[index].message="上拉加载更多"
				}, 1000);
				
				
			}
		},
		//监听加载
		onLoad() {
			uni.getSystemInfo({
			    success:  (res) =>{
			      
			     let height=  res.windowHeight-uni.upx2px(100);
				 this.TabHeight=height;
			     
			    }
			});
		},
		//下拉刷新
			onPullDownRefresh() {
				setTimeout(( )=>{
				            console.log('start pulldown');
							 uni.startPullDownRefresh();
				        }, 1000);
				       
			},
	}
</script>

<style>
.friend-list{
	position: relative;
	margin-left: 20upx;
	margin-right: 20upx;
	padding-top: 20upx;
	padding-bottom: 30upx;
	padding-left: 20upx;
	padding-right: 20upx;
	border-bottom: #EEEEEE 1upx solid;
	
}
.friend-list-left image {
	width: 100upx;
	height: 100upx;
	border-radius: 100%;
	margin-right: 30upx;
	flex-shrink: 0;
}
.friend-list-right{
	width: 70upx;
}
.friend-list-sex{
	margin-right: 5upx;
}
.friend-list-center{
	flex: 1;
}
</style>
